import React, { useState } from 'react'
import Addstu from '../../components/Addstu'
import Showstu from '../../components/Showstu'
import Updatestu from '../../components/Updatestu'
import Searchstu from '../../components/Searchstu'

export default function Root() {
    const [stuArr, setStuArr] = useState([
        { name: '张三', age: '18', sex: 'male' },
        { name: '李四', age: '20', sex: 'female' },
        { name: '王五', age: '22', sex: 'female' }
    ])
    const [stus, setStus] = useState([
        { name: '张三', age: '18', sex: 'male' },
        { name: '李四', age: '20', sex: 'female' },
        { name: '王五', age: '22', sex: 'female' }
    ])
    const addStus = stuObj => {
        let newStuArr = [...stuArr, stuObj]
        setStuArr(newStuArr);
    }
    const updateStus = (stuObj) => {
        let newStuArr = stuArr.map(item => {
            if (item.name !== stuObj.name) {
                return item
            } else {
                return stuObj
            }
        })
        setStuArr(newStuArr);
        setStus(newStuArr)
    }
    const searchStus = (type, searchContent) => {
        if (type === 'name') {
            let newStuarr = stus.filter(item => item.name === searchContent)
            setStuArr(newStuarr);
        }
        if (type === 'age') {
            let newStuarr = stus.filter(item => item.age === searchContent)
            setStuArr(newStuarr);
        }
        if (type === 'sex') {
            let newStuarr = stus.filter(item => item.sex === searchContent)
            setStuArr(newStuarr);
        }
    }
    const deleteStus = (name) => {
        let newStuarr = stus.filter(item => item.name !== name)
        setStuArr(newStuarr); setStus(newStuarr)
    }
    let tableStyle = { width: '500px', textAlign: 'center' }
    let toolStyle = { width: '50px', height: '50px', border: '1px solid red', fontSize: '12px' }
    return (
        <div style={{ width: '500px', margin: 'auto' }}>
            <Addstu addStu={addStus} />
            <Updatestu updateStu={updateStus} />
            <Searchstu searchStu={searchStus} />
            <Showstu stuArr={stuArr} tableStyle={tableStyle} toolStyle={toolStyle} deleteStu={deleteStus} />
        </div>
    )


}


